<template>
  <div>
    <table class="mytable">
      <tr>
        <th style="width: 20%">仓库名称</th>
        <td style="width: 80%">填报情况</td>
      </tr>
      <tr v-for="(item,index) in state.snapshotCangKu">
        <td>
          <span :class="{success : item.hgStatus === 1, warning : item.hgStatus === 0 && item.tbStatus === 1, error : item.tbStatus === 0}">{{item.cWhName}}</span>
        </td>
        <td>
          <span v-if="item.tbStatus === 1">填报率{{item.chouchalv}}%</span>
          <span class="error" v-else>未填报</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup name="plantongjionce">
import request from '/@/utils/request';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps, nextTick} from "vue";

let props = defineProps({
  planId : {type : Number, default: 0}
})
const state = reactive({
  snapshotCangKu:[],
})

const loadData = ()=>{
  request({
    url: '/plan/getplancangkuonce',
    data: {id : props.planId}
  }).then( res =>{
    const { data } = res
    state.snapshotCangKu = data
  })
}
onMounted(()=>{
  loadData();
})
</script>

<style scoped lang="scss">
span.error{
  color: #c45656;
}
span.success{
  color: #32a99e;
}
span.warning{
  color: #b88230;
}
</style>
